<template>
    <div v-if="studentInfo.stuID!==''" style="height: 100%; background-color: #99ccff; box-shadow: -1px 2px 10px 2px rgba(0,0,0,0.3)">
            <a-row style="padding-top: 30%">
                <a-avatar :size="100" icon="user" />
            </a-row>
            <a-row style="margin-top: 5%; font-size: 1.5em;">
                <a-col :span="8" :offset="8">
                    <span v-if="this.isEdit===false">{{this.studentInfo.alias}}</span>
                    <a-input v-if="this.isEdit===true" v-model="studentInfo.alias" style=" text-align: center"/>
                </a-col>
            </a-row>
            <hr style="width: 80%; border-color: rgba(151, 151, 151, 0.3);"/>
            <a-row style="text-align: right; margin-top: 4%;">
                <a-button type="link" style="color: #4b88dc; font-size:1.2em; margin-right:5%" @click="changeEdit()">{{this.isEdit===false?'修改信息':'保存修改'}}</a-button>
            </a-row>
            <!--账号-->
            <a-row  style="text-align: left; margin-bottom: 2%">
                <a-col offset="4" :span="4">
                    账号：
                </a-col>
                <a-col :span="15">
                    <span v-if="this.isEdit===false">{{this.studentInfo.account}}</span>
                    <a-input v-if="this.isEdit===true" v-model="studentInfo.account" style="width: 100%"/>
                </a-col>
            </a-row>
            <!--姓名-->
            <a-row  style="text-align: left; margin-bottom: 2%">
                <a-col offset="4" :span="4">
                    姓名：
                </a-col>
                <a-col :span="15">
                    <span v-if="this.isEdit===false">{{this.studentInfo.name}}</span>
                    <a-input v-if="this.isEdit===true" v-model="studentInfo.name" style="width: 100%"/>
                </a-col>
            </a-row>
            <!--电话-->
            <a-row  style="text-align: left; margin-bottom: 2%">
                <a-col offset="4" :span="4">
                    电话：
                </a-col>
                <a-col :span="15">
                    <span v-if="this.isEdit===false">{{this.studentInfo.phoNumber}}</span>
                    <a-input v-if="this.isEdit===true" v-model="studentInfo.phoNumber" style="width: 100%"/>
                </a-col>
            </a-row>
            <!--邮箱-->
            <a-row  style="text-align: left; margin-bottom: 2%">
                <a-col offset="4" :span="4">
                    邮箱：
                </a-col>
                <a-col :span="15">
                    <span v-if="this.isEdit===false">{{this.studentInfo.eMail}}</span>
                    <a-input v-if="this.isEdit===true" v-model="studentInfo.eMail" style="width: 100%"/>
                </a-col>
            </a-row>
            <!--学校-->
            <a-row  style="text-align: left; margin-bottom: 2%">
            <a-col offset="4" :span="4">
                学校：
            </a-col>
            <a-col :span="15">
                <span v-if="this.isEdit===false">{{this.studentInfo.school}}</span>
                <a-input v-if="this.isEdit===true" v-model="studentInfo.school" style="width: 100%"/>
            </a-col>
        </a-row>
            <!--学院-->
            <a-row  style="text-align: left; margin-bottom: 2%">
                <a-col offset="4" :span="4">
                    学院：
                </a-col>
                <a-col :span="15">
                    <span v-if="this.isEdit===false">{{collegeName}}</span>
                    <a-select :options="this.collageData" v-if="this.isEdit===true" v-model="nowSelected" style="width: 100%" @change="handleMajorChange">
                    </a-select>
                </a-col>
            </a-row>
            <!--专业-->
            <a-row  style="text-align: left; margin-bottom: 2%">
                <a-col offset="4" :span="4">
                    专业：
                </a-col>
                <a-col :span="15">
                    <span v-if="this.isEdit===false">{{majorName}}</span>
                    <a-select :options="this.majorData" v-if="this.isEdit===true" v-model="nowMajorSelected" style="width: 100%" @change="handleClassChange">
                    </a-select>
                </a-col>
            </a-row>
            <!--班级-->
            <a-row  style="text-align: left; margin-bottom: 2%">
                <a-col offset="4" :span="4">
                    班级：
                </a-col>
                <a-col :span="15">
                    <span v-if="this.isEdit===false">{{classNameItem}}</span>
                    <a-select :options="this.classData" v-if="this.isEdit===true" v-model="nowClassSelected" style="width: 100%">
                    </a-select>
                </a-col>
            </a-row>
            <!--学号-->
            <a-row  style="text-align: left; margin-bottom: 2%">
            <a-col offset="4" :span="4">
                学号：
            </a-col>
            <a-col :span="15">
                <span v-if="this.isEdit===false">{{this.studentInfo.stuNumber}}</span>
                <a-input v-if="this.isEdit===true" v-model="studentInfo.stuNumber" style="width: 100%"/>
            </a-col>
        </a-row>
            <!-- 修改密码界面-->
            <a-row style="margin-top: 5%">
                <a-button type="primary" @click="() => (modal2Visible = true)">
                    修改密码
                </a-button>
                <a-modal
                        v-model="modal2Visible"
                        title="修改密码"
                        centered
                        @ok="changePasswdSubmit"
                >
                    <a-row  style="text-align: left;">
                        <a-col >
                            <a-descriptions>
                                <a-descriptions-item label="旧密码">
                                    <a-input-password  v-model="changePasswd.password" style="width: 150%"/>
                                </a-descriptions-item>
                            </a-descriptions>
                        </a-col>
                        <a-col >
                            <a-descriptions>
                                <a-descriptions-item label="新密码">
                                    <a-input-password v-model="changePasswd.newPassword" style="width: 150%"/>
                                </a-descriptions-item>
                            </a-descriptions>
                        </a-col>
                    </a-row>

                </a-modal>
                <a-button @click="logout" style="margin-left: 2%" type="primary"><a-icon type="logout" />登出</a-button>
            </a-row>
        </div>
</template>

<script>

    import Cookies from 'js-cookie'
    export default {
        name: "InfoBoard",
        data(){
            return({
                collageData:[],
                majorData:[],
                classData:[],
                nowSelected:'',
                nowMajorSelected:'',
                nowClassSelected:'',
                collegeName:'',
                majorName:'',
                classNameItem:'',
                modal2Visible: false,
                changePasswd:{
                    password:'',
                    newPassword:''
                },
                studentInfo :{
                    stuID:'',
                    name:'',
                    account:'',
                    alias:'',
                    stuNumber:'',
                    cls:'',
                    grade:'',
                    phoNumber:'',
                    eMail:'',
                    school:'',
                    college:'',
                    major:'',
                },
                isEdit:false,

            })
        },
        beforeMount() {
            this.studentInfo = this.$store.state.student.student_info;
        },
        methods:{
            handleMajorChange(value) {
                this.$store.dispatch('student/getMajor',value).then(
                    majRes=>{
                        if(majRes==null){
                            this.$message.error('网络异常');
                        }
                        else  if(majRes.code === 0){
                            this.$message.error(majRes.msg);
                        }
                        else if (majRes.code === 1){
                            this.majorData = this.$store.state.student.major_list;
                            this.nowMajorSelected = this.majorData[0].value
                            this.$store.dispatch('student/getClass',this.nowMajorSelected).then(
                                claRes=>{
                                    if(claRes==null){
                                        this.$message.error('网络异常');
                                    }
                                    else  if(claRes.code === 0){
                                        this.$message.error(claRes.msg);
                                        this.classData = [{label:'无班级', value:0}];
                                        this.nowClassSelected = 0;
                                    }
                                    else if (claRes.code === 1){
                                        this.classData = this.$store.state.student.class_list;
                                        this.nowClassSelected = this.classData[0].value
                                    }
                                })
                        }
            })},
            handleClassChange(value) {
                this.$store.dispatch('student/getClass',value).then(
                    claRes=>{
                        if(claRes==null){
                            this.$message.error('网络异常');
                        }
                        else  if(claRes.code === 0){
                            this.$message.error(claRes.msg);
                            this.classData = [{label:'无班级', value:0}];
                            this.nowClassSelected = 0;
                        }
                        else if (claRes.code === 1){
                            this.classData = this.$store.state.student.class_list;
                            this.nowClassSelected = this.classData[0].value
                        }
                    })},
            changeEdit(){
                if(this.isEdit===false){
                    this.isEdit = true;

                }else{
                    this.studentInfo.college=this.nowSelected;
                    this.studentInfo.cls=this.nowClassSelected;
                    this.studentInfo.major=this.nowMajorSelected;
                    const requestData = {
                        studentInfo: this.studentInfo,
                        token: this.$store.state.login.token,
                        studentID: this.$store.state.login.student_id
                    }
                    this.$store.dispatch('student/changeStudentInfo',requestData).then(
                        res=>{
                            if(res.code === 0){
                                console.log(res.msg)
                                this.$message.error(res.msg);
                            }else {
                                this.$message.success('个人信息修改成功');
                                this.studentInfo = this.$store.state.student.student_info;
                                this.studentInfo.college=this.nowSelected;
                                this.studentInfo.cls=this.nowClassSelected;
                                this.studentInfo.major=this.nowMajorSelected;
                                this.$store.dispatch('student/getCollage').then(//获取学院
                                    res=>{
                                        if(res==null){
                                            this.$message.error('网络异常');
                                        }
                                        if(res.code === 0){
                                            this.$message.error(res.msg);
                                        } else if(res.code===1){
                                            this.collageData = this.$store.state.student.collage_list;
                                            this.collageData.forEach(item =>{
                                                if (this.studentInfo.college === item.value){
                                                    this.collegeName = item.label;
                                                }
                                            })
                                            //获取专业
                                            this.$store.dispatch('student/getMajor',this.studentInfo.college).then(
                                                majRes=>{
                                                    if(majRes==null){
                                                        this.$message.error('网络异常');
                                                    }
                                                    else  if(majRes.code === 0){
                                                        this.$message.error(majRes.msg);
                                                    }
                                                    else if (majRes.code === 1){
                                                        this.majorData = this.$store.state.student.major_list;
                                                        this.majorData.forEach(item =>{
                                                            if (this.studentInfo.major === item.value){
                                                                this.majorName = item.label;
                                                            }
                                                        })
                                                        this.$store.dispatch('student/getClass',this.studentInfo.major).then(
                                                            claRes =>{
                                                                if(claRes==null){
                                                                    this.$message.error('网络异常');
                                                                }
                                                                else  if(claRes.code === 0){
                                                                    this.collegeName = "";
                                                                    this.majorName = "";
                                                                    this.classNameItem = "";
                                                                }else if(claRes.code === 1){
                                                                    this.classData = this.$store.state.student.class_list;
                                                                    this.classData.forEach(item =>{
                                                                        if (this.studentInfo.cls === item.value){
                                                                            this.classNameItem = item.label;
                                                                        }
                                                                    })
                                                                }
                                                            }
                                                        )

                                                    }
                                                }
                                            )

                                        }
                                    }
                                )
                            }
                            this.isEdit = false;
                        }
                    ).catch(()=>{
                        this.$message.error("网络异常")
                    })
                }

            },
            changePasswdSubmit(){
                if(this.changePasswd.password!=='') {
                    const data = {
                        token: this.$store.state.login.token,
                        studentID: this.$store.state.login.student_id,
                        password: this.changePasswd.password,
                        newPassword: this.changePasswd.newPassword
                    };
                    this.$store.dispatch('student/changePassword', data).then(
                        res => {
                            if (res == null) {
                                this.$message.error('网络异常');
                            }
                            if (res.code === 0) {
                                if(res.msg==='用户不匹配'){
                                    this.$message.error('原密码错误');
                                }else {
                                    this.$message.error(res.msg);
                                }
                            } else {
                                this.$message.success('密码修改成功');
                                this.modal2Visible = false;
                                this.changePasswd.password=''
                                this.changePasswd.newPassword=''
                            }
                        }
                    ).catch(()=>{
                        this.$message.error("网络异常")
                    })
                }
            },
            logout(){
                Cookies.remove('student_id');
                Cookies.remove('token');
                this.$store.state.login.token='';
                this.$store.state.login.student_id='';
                this.$router.push('/login')
            },
        },
        beforeCreate() { //初始获取学院和专业和班级
            this.$store.dispatch('student/getCollage').then(//获取学院
                res=>{
                    if(res==null){
                        this.$message.error('网络异常');
                    }
                    if(res.code === 0){
                        this.$message.error(res.msg);
                    } else if(res.code===1){
                        this.collageData = this.$store.state.student.collage_list;
                        //this.nowSelected = this.collageData[0].value
                        this.nowSelected =    this.studentInfo.college
                        this.collageData.forEach(item =>{
                            if (this.studentInfo.college === item.value){
                                this.collegeName = item.label;
                            }
                        })
                        //获取专业
                            this.$store.dispatch('student/getMajor',this.studentInfo.college).then(
                                majRes=>{
                                    if(majRes==null){
                                        this.$message.error('网络异常');
                                    }
                                    else  if(majRes.code === 0){
                                        this.$message.error(majRes.msg);
                                    }
                                    else if (majRes.code === 1){
                                        this.majorData = this.$store.state.student.major_list;
                                        //this.nowSelected = this.collageData[0].value
                                        this.nowMajorSelected = this.studentInfo.major
                                        this.majorData.forEach(item =>{
                                            if (this.studentInfo.major === item.value){
                                                this.majorName = item.label;
                                            }
                                        })
                                            this.$store.dispatch('student/getClass',this.studentInfo.major).then(
                                                claRes =>{
                                                    if(claRes==null){
                                                        this.$message.error('网络异常');
                                                    }
                                                    else  if(claRes.code === 0){
                                                        this.$message.error(claRes.msg);
                                                    }else if(claRes.code === 1){
                                                        this.classData = this.$store.state.student.class_list;
                                                        //this.nowSelected = this.collageData[0].value
                                                        this.nowClassSelected =    this.studentInfo.cls
                                                        this.classData.forEach(item =>{
                                                            if (this.studentInfo.cls === item.value){
                                                                this.classNameItem = item.label;
                                                            }
                                                        })
                                                    }
                                                }
                                            )

                                    }
                                }
                            )

                    }
                }
            );
        }
    }
</script>

<style scoped>

</style>